<template>
	<view class="product_show">
		<view v-for="goods in explosivegoodsDate" :key="goods.id">
			<view class="products" v-for="good in goods.goods" :key="good.id">
				<image :src="good.mainImg" class="products_img" mode="aspectFit" lazy-load="true" @click="toProductDetails(good.id)" style="border-radius: 10upx;"></image>
				<view class="products_text">
					<text>{{good.goodName}}</text>
				</view>
				<view class="products_price">
					<text>￥{{good.sellingPrice}}</text>
					<text>￥{{good.originalPrice}}</text>
				</view>
				<image src="../../static/images/shopping_car_03.png" class="products_shopping_car" mode="aspectFill" lazy-load="true" @click="toShopCar(good.id)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {   
		name:"explosiveGoods",
		props:["explosivegoodsDate"],
		data() {
			return {
				sum:0
			};
		},
		methods:{
			//跳转商品详情
			toProductDetails(id){
				uni.navigateTo({
					url:"../../productDetails/productDetails?id="+id
				})
			},
			//加入购物车
			toShopCar(id){
				uni.showLoading({
					title:"加入购物车中...",
					mask:true,
					duration:1000
				})
				let that=this;
				that.sum++
				uni.request({
					url: this.$store.state.URL+"goods/shopping_cart/add_shopping_cart",
					data: {
						token: this.$store.state.token,
						goodID: id,
						skuID: '',
						num: that.sum
					},
					success(res) {
						uni.hideLoading();
						that.sum=0;
						if(res.data.status==true){
							uni.showToast({
								title:"已加入购物车",
								duration:1000
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								duration:1000,
								icon:"none"
							})
						}
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
  .product_show{
  	display:flex;
  	justify-content: flex-start;
  	flex-wrap: wrap;
  	/* margin:10upx 20upx; */
	flex-shrink: 0;
  }
  .products{
  	background:#fff;
  	border-radius: 10upx;
  	text-align: center;
  	padding:20upx 20upx;
  	width:auto;
	height:auto;
	/* margin: 10upx 45upx; */
	margin-left:10rpx;
    margin-top:20rpx;
    margin-bottom:20rpx;

  }
  .products_img{
  	width:100%;
  	height:164upx;
	border-radius: 10upx;
  }
  .products_shopping_car{
  	width:46upx;
  	height:46upx;
  	float: right;
  	margin-top:10upx;
  	/* margin-right: 15upx; */
  }
  .products_price{
  	display: inline;
	/* margin-right: 16upx; */
  }
  .products_price text:nth-of-type(1){
  	font-size:20upx;
  	color:#f2526f;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	overflow: hidden;
  	width: 100upx;
  	display: inline-block;
	margin-left:-18rpx
  }
  .products_price text:nth-of-type(2){
  	font-size:18upx;
  	color:#b7b7b7;
  	text-decoration: line-through;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	overflow: hidden;
  	width: 70upx;
  	display: inline-block;
  }
  .products_text text{
  	 font-size:20upx;
  	 color:#333;
  	 line-height: 20px;
     height: 40px;
     white-space: pre-wrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
  	 -webkit-box-orient: vertical;
     word-wrap:break-word; 
     word-break:break-all;
  	 /* padding:0 10upx; */
  	 text-align: left;
  	 /* margin-left: 10upx; */
  }
</style>
